<script lang="ts" setup>
import { nextTick, onMounted, ref, watch } from "vue"
import { useResponsiveLayoutStore } from "@/store/responsiveLayout"
import { get } from "@/utils/api"

const store = useResponsiveLayoutStore()

const option = {
  xAxis: {
    type: "category",
    data: [],
    name: "日期"
  },
  yAxis: {
    type: "value",
    name: "收入",
    splitLine: { show: false }
  },
  tooltip: {
    trigger: "axis",
    axisPointer: { type: "line" }
  },
  legend: { data: ["支付宝", "微信"] },
  series: [
    {
      name: "支付宝",
      data: [],
      type: "line",
      smooth: true
    },
    {
      name: "微信",
      data: [],
      type: "line",
      smooth: true
    }
  ]
}


const chart = ref<any>(null)
const show = ref(false)


onMounted(async () => {
  window.addEventListener("resize", () => {
    chart.value.resize()
  })
  watch(() => store.asideWidth, () => {
    let count = 0
    const timer = setInterval(() => {
      if (count >= 1000) {
        clearInterval(timer)
        return
      }
      chart.value.resize()
      count++
    }, 1)
    setTimeout(() => {
      clearInterval(timer)
    }, 1000)
  })
  await nextTick()
  // 等待DOM挂载好之后，再执行下面的代码
  show.value = true
  // 解构获取的数据
  const { wechatPay, aliPay, date } = await get("api/order/trend")
  // 日期数据
  option.xAxis.data = date
  // 支付宝支付数据
  option.series[0]["data"] = aliPay
  // 微信支付数据
  option.series[1]["data"] = wechatPay
  // 渲染图表
  chart.value.setOption(option)
})

</script>

<template>
  <t-row class="container">
    <t-col :span="12">
      <t-card header-bordered title="收入趋势">
        <div class="charts_container">
          <e-charts v-if="show" ref="chart" class="chart"/>
        </div>
      </t-card>
    </t-col>
  </t-row>
</template>

<style lang="less" scoped>

@border-color: var(--td-component-border);
.container {
  border: @border-color 1px solid;
  padding: 10px;
  margin: 10px 0;

  .charts_container {
    width: 100%;
    height: 250px;

    .chart {
      width: 100%;
      height: 100%;

    }
  }

}

</style>
